<template>
  <div class="md-topics-pages-component">
    <div class="md-topic-container">
      <div class="md-topic-type-box">
        <el-tree class="tree" :data="categoryAryList" highlight-current :props="{children:'categoryList',label:'name'}" @node-click="menuClick" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" ref="tree" node-key="rid">
        </el-tree>

        <!-- <el-menu ref="elMenu" :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-submenu :index="`${item.rid}`" v-for="item in categoryAryList" :key="item.rid">
            <template slot="title">
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="c in item.categoryList" :key="c.rid" @click="menuClick(c)">{{c.name}}</el-menu-item>
            </el-menu-item-group> -->
        <!-- <el-submenu index="1-4">
              <template slot="title">四级真题</template>
              <el-menu-item index="1-4-1">2023年真题</el-menu-item>
            </el-submenu> -->
        <!-- </el-submenu>
        </el-menu> -->
      </div>
      <div class="md-topic-list-box">
        <div class="search-box">
          <div class="search-item">
            <label class="search-label">试卷名称：</label>
            <el-input class="w-280" v-model="params.searchValue" placeholder="请输入名称"></el-input>
          </div>
          <div class="search-btn">
            <el-button type="primary" @click="selectAnswerList(1)">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </div>
        </div>
        <div class="topic-list-panel">
          <ul class="topic-list" v-if="topicsListAry.length">
            <li class="topic-item" v-for="item in topicsListAry" :key="item.rid">
              <div class="t-img">
                <img :src="`/video-dev${item.cover}`" :alt="item.title">
              </div>
              <div class="t-right">
                <div class="t-tit-box">
                  <p class="t-tit">{{item.title}}</p>
                  <p class="t-type">
                    <span>上传时间：{{item.createTime}}</span>
                    <span>类型：{{item.type}}</span>
                  </p>
                </div>
                <div class="q-btn">
                  <el-button type="primary" size="mini" @click="turnTopicDetail(item)">答题</el-button>
                  <el-button size="mini" @click="download(item)">下载</el-button>
                </div>
              </div>
            </li>
          </ul>
          <p v-else class="no-data">暂无数据</p>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page="+params.pageNum" :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { selectAnswerList } from '@/axios/topics.js'
import { getCategoryList } from '@/axios/course'
import { saveAs } from 'file-saver'
export default {
  data () {
    return {
      inputVal: '',
      defaultActive: '',
      categoryAryList: [],
      topicsListAry: [],
      params: {
        categoryId: null,
        searchValue: '',
        pageNum: 1,
        pageSize: 10
      },
      defaultExpandedKeys: [],
      total: 0
    }
  },
  computed: {
    isLogin () {
      return window.localStorage.getItem('isLogin')
    },
    userInfo () {
      return JSON.parse(window.localStorage.getItem('userInfo'))
    }
  },
  created () {
    this.getCategoryList()
  },
  methods: {
    handleReset () {
      this.params.searchValue = ''
      this.selectAnswerList(1)
    },
    async getCategoryList () {
      const res = await getCategoryList(2)
      if (res.code === 200) {
        this.categoryAryList = res.data
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.categoryAryList[0].rid)
          // 设置展开所有行
          const nodesMap = this.$refs.tree.store.nodesMap
          const keys = Object.keys(nodesMap)
          keys.forEach(key => {
            nodesMap[key].expanded = true
          })

          // this.$refs.elMenu.open(this.categoryAryList[0].rid)
          // this.defaultActive = this.categoryAryList[0].categoryList[0].rid + ''
          this.params.categoryId = this.categoryAryList[0].rid
          this.selectAnswerList(1)
        })
      }
    },
    async selectAnswerList (pNo) {
      this.params.pageNum = pNo
      const res = await selectAnswerList(this.params)
      if (res.code === 200) {
        this.topicsListAry = res.rows
        this.total = res.total
      }
    },
    // 子类点击
    menuClick (item) {
      this.params.categoryId = item.rid
      this.selectAnswerList(1)
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
      this.params.categoryId = key
      this.selectAnswerList(1)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
      this.defaultActive = '-1'
    },
    menuSelect (index, indexPath) {
      console.log(123, index, indexPath)
    },
    handleCurrentChange (val) {
      this.params.pageNum = val
      this.selectAnswerList()
    },
    turnTopicDetail (item) {
      if (this.isLogin) {
        console.log('进来了');
                window.open(`/topicDetail?topicId=${item.rid}`)
      } else {
        this.$confirm('是否去登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/login'
          })
        }).catch(() => { });
      }
    },
    blobValidate (data) {
      return data.type !== 'application/json'
    },
    async download (item) {
      if (this.isLogin) {
        const res = await this.$http.post(`/biz/answer/downloadVAnswer?rid=${item.rid}`, {}, {
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          responseType: 'blob',
        })
        const isBlob = this.blobValidate(res)
        if (isBlob) {
          const blob = new Blob([res])
          saveAs(blob, `${item.title}${new Date().getTime()}.zip`)
        }
      } else {
        this.$confirm('是否去登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/login'
          })
        }).catch(() => { });
      }
    }
  }
}
</script>
<style lang="less" scoped>
.md-topics-pages-component {
  width: 100%;
  padding: 30px 0;
  // background: #eceff5;
  .md-topic-container {
    display: flex;
    width: 1152px;
    margin: 0 auto;
    .md-topic-type-box {
      width: 260px;
      height: 550px;
      background: #fff;
      border-radius: 4px;
      margin-right: 20px;
      flex-shrink: 0;
      overflow-y: auto;
      .scroll-bar(5px,5px);
      padding: 10px;
      box-sizing: border-box;
    }
    .md-topic-list-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      .search-box {
        height: 80px;
        width: 100%;
        border-radius: 4px;
        background: #fff;
        margin-bottom: 20px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        .search-item {
          // margin: 0 10px 10px 0;
          display: flex;
          align-items: center;
          margin-right: 40px;
          .search-label {
            font-size: 14px;
            color: #333;
          }
        }
        .search-btn {
          display: inline-block;
        }
      }
      .topic-list-panel {
        min-height: 600px;
        border-radius: 4px;
        background: #fff;
        padding: 20px 30px;
        box-sizing: border-box;
        overflow-y: auto;
        .scroll-bar(5px,5px);
        .topic-list {
          width: 100%;
          .topic-item {
            padding: 20px 0;
            border-bottom: 1px solid rgb(230, 230, 230);
            display: flex;
            align-items: center;
            &:first-child {
              padding-top: 0;
            }
            .t-img {
              width: 100px;
              height: 100px;
              border-radius: 8px;
              overflow: hidden;
              margin-right: 20px;
              flex-shrink: 0;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .t-right {
              flex: 1;
              height: 100px;
              display: flex;
              align-items: center;
              .t-tit-box {
                flex: 1;
                .t-tit {
                  font-size: 16px;
                  margin-bottom: 20px;
                }
                .t-type {
                  span {
                    color: #888;
                    font-size: 12px;
                    margin-right: 30px;
                  }
                }
              }
              .q-btn {
                margin-left: 10px;
                flex-shrink: 0;
              }
            }
          }
        }
        .pagination {
          margin-top: 20px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
.no-data {
  color: #999;
  font-size: 12px;
  padding: 30px 0;
  text-align: center;
}
.w-280 {
  width: 280px;
}
/deep/ .el-menu {
  border-right: none !important;
}
/deep/ .el-submenu__title:hover {
  background: rgba(37, 192, 167, 0.05);
}
/deep/ .el-menu-item:focus,
.el-menu-item:hover {
  background: rgba(37, 192, 167, 0.05);
}
/deep/ .el-menu-item.is-active {
  // color: @md-primary-color;
  color: #333;
}
/deep/ .el-pager li.active {
  color: @md-primary-color;
}
/deep/ .el-pager li:hover {
  color: @md-primary-color;
}
/deep/ .el-input__inner:focus {
  border-color: @md-primary-color !important;
}
/deep/ .el-pagination button:hover {
  color: @md-primary-color;
}
/deep/ .el-button--primary {
  border-color: @md-primary-color !important;
  background: @md-primary-color;
}
/deep/ .el-button:focus,
.el-button:hover {
  color: @md-primary-color;
  border-color: rgba(37, 192, 167, 0.3);
  background: rgba(37, 192, 167, 0.1);
}
</style>
